<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container" class="active" myattr="myval">
      <!-- 我是注释 -->
      <p>我是span</p>
      我是文本
    </div>
  </body>
</html>
<script>
  // 节点类型
  // 获取container里的所有节点
  var containerEle = document.querySelector(".container");
  var eles = containerEle.childNodes;
  console.log(eles);

  // 节点类型 ： nodeType是 1 ：证明这个节点是元素节点 如果是2： 证明是属性节点  3：证明是文本节点 8：是注释节点
  // 每一个节点都会有节点名:nodeName  和节点值:nodeValue
  //1.获取元素节点 ，元素节点的nodeType 1  节点名是大写的标签名 节点值是null
  // var eleNode = eles[1];
  // console.log(eleNode.nodeType);
  // if(eleNode.nodeType==1){
  // console.log("是一个元素节点");
  // console.log(eleNode.nodeName);
  // console.log(eleNode.nodeValue);

  // }

  // 2.文本节点   节点类型 nodeType ：3   节点名 nodeName ：text  节点值nodeValue： 文本的内容
  // var textNode = eles[2];
  // console.log(textNode.nodeType);
  // console.log(textNode.nodeName);
  // console.log(textNode.nodeValue);

  // 3.注释节点 节点类型 nodeType:8 节点名 nodeName：comment 节点值 nodeValue :注释内容；
  // var commentNode = eles[0];
  // console.log(commentNode.nodeType);
  // console.log(commentNode.nodeName);
  // console.log(commentNode.nodeValue);

  // 4.属性节点 ； nodeType是2   节点名：nodeName是属性名 节点值 nodeValue 是属性值；
  // 获取元素节点的属性
  var attrs = containerEle.attributes; // 获取元素的所有属性内容；
  //    console.log(attrs);
  var myattr = attrs[1];
  console.log(myattr.nodeType); // 2
  console.log(myattr.nodeName); // myattr
  console.log(myattr.nodeValue); //myval

  // 总结 ： 节点分类 nodeType
  /*
          1.元素节点( nodeName ：大写标签名 nodeValue:null )
          2.属性节点(nodeName: 属性名 nodeValue：属性值)
          3.文本节点（nodeName：text nodeValue：文本内容）
          8 注释节点（nodeName：comment ；nodeVlaue：注释内容）；
  */
</script>
